<template>
    <div class="app-detail">
        <el-card class="box-card">
            <div class="container-header">
                <span class="hign-line"></span>
                <span class="header-left">
                    {{$t('inspectionManagement.printerPreview')}}
                </span>

            </div>

            <div class="print-content">
                <div class="print-body">
                    <div style="padding:24px 64px">
                        <el-form ref="queryForm" label-width="88px">
                            <el-form-item label="打印数量">
                                <el-input size="small" type="number" min=1 v-model="printNum" />
                            </el-form-item>
                        </el-form>
                        <div class="print-table" id="printTest" ref="print">
                            <el-table :data="tableData" :show-header="false" border style="width: 100%">
                                <el-table-column prop="label" label="key">
                                    <template slot-scope="scope">
                                        <div>
                                            <span>{{scope.row.label}}</span>
                                            <span v-if="scope.row.src"><img :src="scope.row.src" alt="" /></span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="value">
                                    <template slot-scope="scope">
                                        <div>
                                            <span>{{scope.row.value}}</span>
                                            <div v-if="scope.row.src">
                                                <vue-qr :logoSrc="logo" text="111" :size="130"></vue-qr>
                                            </div>
                                        </div>

                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <div class="submit-footer mb8 btnGroup">
            <el-button icon="el-icon-close" size="small" @click="closeTab" class="drawer-close">{{$t('public.close')}}</el-button>
            <el-button type="default" @click="printDemo" v-print="'#printTest'" class="exportitemBtn" size="small"><img src="@/assets/images/icons/print.png" alt="" />{{ $t("inspectionManagement.printer") }}</el-button>
        </div>
    </div>

</template>


<script>
import pass from '@/assets/images/inspection-status/pass.png'
import unpass from '@/assets/images/inspection-status/unpass.png'
import testMaterial from '@/assets/images/inspection-status/testMaterial.png'
import accept from '@/assets/images/inspection-status/accept.png'
import { incomingInfo } from '@/api/inspectionManagement/inspectionManagement'
import logo from '@/assets/images/inspection-status/qrcode-logo.png'
import vueQr from 'vue-qr'
export default {
    name: 'Index',
    components: { vueQr },
    data() {
        return {
            printNum: 1,
            logo: logo,
            pass: pass,
            id: this.$route.params.id,
            usingDecision: this.$route.query.usingDecision,
            tableData: [],
        }
    },
    mounted() {
        console.log('this.usingDecision', typeof this.usingDecision)
        this.getIncomingInfo()
    },
    methods: {
        submitForm(url) {
            this.$router.push({ path: url })
        },
        // 点击打印
        printDemo() {
            setTimeout(() => {
                this.$print(this.$refs.print)
            }, 100)
        },
        closeTab() {
            this.$router.push({ path: '/inspect/incoming' })
        },
        getIncomingInfo() {
            incomingInfo(this.id).then((response) => {
                let viewModel = response.data
                let tableData = [
                    { label: '物料编码', value: viewModel.materialCode },
                    { label: '供应商批次', value: viewModel.lichn },
                    { label: '批次', value: viewModel.lichn },
                    { label: '质检结果', value: '' },
                ]

                console.log('this.usingDecision', this.usingDecision === '2')
                if (this.usingDecision === '2') {
                    tableData[3].src = accept
                } else if (viewModel.usingDecision === '4') {
                    tableData[3].src = testMaterial
                } else {
                    if (viewModel.decideResult == '1') {
                        tableData[3].src = pass
                    }
                    if (viewModel.decideResult == '0') {
                        tableData[3].src = unpass
                    }
                }

                this.tableData = tableData
                // this.getFlowByMaterialCode(this.viewModel.materialCode)
                this.loading = false
            })
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
    padding-top: 20px;
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding-bottom: 20px;
}
::v-deep .el-aside {
    padding: 0;
    margin-bottom: 0;
}
.content-style {
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    background-color: white;
    margin-top: 10px;
}
.header-left {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
}
.header-right {
    float: right;
}
.container-header {
    width: 100%;
    border-bottom: 1px solid #ededf2;
    padding-left: 12px;
}
.mb8 {
    float: left;
    margin-top: 6px;
    width: 100%;
}
.hign-line {
    position: relative;
    left: -8px;
    top: 14px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #0b7be3;
    float: left;
}
.drawer-close {
    background: #f7f8fa;
    border-color: #f7f8fa;
}
.submit-footer {
    height: 52px;
    background: #ffffff;
    box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px 4px 0px 0px;
    position: fixed;
    z-index: 9;
    bottom: 0px;
    width: 100%;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep .el-card {
    padding-top: 0px;
    min-height: calc(100vh - 190px);
}
::v-deep .el-table .cell {
    line-height: 38px;
}
.app-detail {
    min-height: calc(100vh - 180px);
    min-height: calc(100vh - 180px);
    overflow: auto;
}
.result-tag-green {
    width: 40px;
    height: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #20b09f;
    line-height: 18px;
    background: rgba(32, 176, 159, 0.08);
    border-radius: 2px;
}

.print-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
}
.print-body {
    width: 50%;
    background: rgba(11, 123, 227, 0.08);
    width: 448px;
    height: 50%;
    height: 448px;
}
.print-table {
    margin-top: 12px;
    width: 320px;
    height: 320px;
    background: #fff;
    padding: 11px;
}
</style>
